<template>
   <footer id="footer">
      <div class="out">
        <!-- 尾部 -->
        <div class="footer_bottom">
            <div class="bgLogo"></div>
            <span v-for="(item,index) in bottomList" :key="index" v-html="item"></span>
        </div>
        <!-- 结尾 -->
        <div class="footer_end">
            <a v-for="(item,index) in endList" :key="index" :href="item.src" :style="getBackground(index)"></a>
        </div>
      </div>
   </footer>
</template>

<script>
import vuex, { mapState } from 'vuex'
export default {
  data(){
    return{
    
    }
  },
  computed: {
    ...mapState(['bottomList','endList'])
  },
  methods:{
    getBackground(index){//精灵图定位
        var position = this.endList[index].position;
        return "background: url('https://css.mafengwo.net/images/mfw-footer-sprite7.png')"+position
    }
  },
  created(){
    this.$store.dispatch('reqFooterData')
  }
}
</script>
<style  scoped>
/* 样式表 */
 @import "../assets/css/Footer.css";
 
/* 插入的元素样式 橙色字体 */
.footer_bottom span >>> img{
  height: 12px;
  width: 12px;
}
.out >>> .colorFont{
  color: #ff9d00;
  margin-left: 2px;
}
.out >>> a{
  color: #c2c2c2;
  text-decoration: none;
  margin-right: 8px;
}
.out >>> a:hover{
  color: white;
  text-decoration: none;
}

</style>